<template>
  <div>About</div>
</template>

<script>
export default {
  name: "About",
  beforeRouteEnter(to, from, next) {
    // 在渲染该组件的对应路由被 confirm 前调用
    // 不！能！获取组件实例 `this`
    // 因为当守卫执行前，组件实例还没被创建
    console.log("组件内的路由守卫：beforeRouteEnter");
    next((vm) => {
      console.log("组件内的路由守卫：beforeRouteEnter中next的回调函数");
    });
  },
  beforeRouteLeave(to, from, next) {
    // 在导航离开渲染该组件的对应路由时调用
    // 与 `beforeRouteUpdate` 一样，它可以访问组件实例 `this`
    console.log("组件内的路由守卫：beforeRouteLeave");
    next();
  },
};
</script>
